<template>
  <el-Card>
    <el-row :gutter="28" class='header'>
      <el-col :span='7'>
        <el-input :placeholder="$t('table.placeholder')" clearable v-model="queryForm.query" />
      </el-col>
      <el-col :span="7">
        <el-button type="primary" :icon="Search" @click="initGetUsersList">{{ $t('table.search') }}</el-button>
        <el-button type="primary" @click="openVis()">{{ $t('table.adduser') }}</el-button>

      </el-col>
    </el-row>
    <el-row :gutter="28">
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column :prop="item.prop" :label="$t(`table.${item.lable}`)" :width='item.width'
          v-for="(item, i) in options" :key="i">
          <template v-slot="{ row }" v-if="item.prop == 'mg_state'">
            <el-switch v-model="row.mg_state" @change=changState(row) />
          </template>
          <template v-slot="{ row }" v-else-if="item.prop=='create_time'">
            {{ $filters.filterTimers(row.create_time) }}
          </template>
          <template v-else-if="item?.prop=='action'" #default="{row}">
            <el-button size="small" type="primary" :icon="Edit" @click="openVis(row)"></el-button>
            <el-button size="small" type="warning" :icon="Setting"></el-button>
            <el-popconfirm title="Are you sure to delete this?" @confirm="delFun(row)">
              <template #reference>
                <el-button size="small" type="danger" :icon="Delete" ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :currentPage="queryForm.pagenum" :pageSize="queryForm.pagesize" :page-sizes="[2, 5, 10, 15]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
      <Dialog :dialogVisible="dialogVisible" :initGetUsersList="initGetUsersList" :changeVis="changeVis"
        @initUsersList="initGetUsersList" v-if="dialogVisible" :modalVal="modalVal"></Dialog>
    </el-row>
  </el-Card>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { Search, Edit, Setting, Delete } from '@element-plus/icons-vue'
import { getUser, updataStatus } from "@/api/users"
import { options } from "./options.js"
import { ElMessage } from 'element-plus'
import Dialog from "./components/dia-log.vue"
import { isNull, deepClone } from "./filters"
// import i18n from '@/i18n'
// const t=i18n.global.t
import { useI18n } from 'vue-i18n'
const i18n = useI18n()
// import dayjs from 'dayjs'



// const handleData=(val,type)=>{
//   console.log(val,dayjs(val).format('YYYY-MM-DD HH:mm:ss'),'val')
//   switch(type){
//     case 1:
//       return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
//     default:
//       return val
//   }
// }
const queryForm = ref({
  query: '',
  pagenum: 1,
  pagesize: 2
})
let tableData = reactive({
  data: []
})
let total = ref(0)
const dialogVisible = ref(false)
const modalVal = reactive({
  title: '',
  val: {}
})

const openVis = (row) => {
  dialogVisible.value = true
  if (!isNull(row)) {
    modalVal.title = '编辑用户'
    modalVal.val = deepClone(row)
  } else {
    modalVal.title = '添加用户'
    modalVal.val = {}
  }
}
const delFun = (row) => {
  console.log(row, 'row');
}

const initGetUsersList = async () => {
  const res = await getUser(queryForm.value)
  // tableData.data= res?.users?.map(item=>{
  //   return {
  //     ...item,create_time:handleData(item.create_time,1)
  //   }
  // })
  total.value = res?.totalpage
  tableData.data = res?.users
  console.log(res, tableData, 'res');

}
initGetUsersList()
const handleSizeChange = (val) => {
  queryForm.value.pagenum = 1
  queryForm.value.pagesize = val
  initGetUsersList()
}
const handleCurrentChange = (val) => {
  queryForm.value.pagenum = val
  initGetUsersList()

}
const changState = async (val) => {
  console.log(val, 'val')

  let res = await updataStatus({ uId: val.id, state: val.mg_state })
  if (res) {
    ElMessage({
      message: i18n.t('message.updeteSuccess'),
      // message: t('message.updeteSuccess'),
      type: 'success',
    })
    initGetUsersList()

  }

}
const changeVis = (vis) => {
  dialogVisible.value = vis
}

</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: end;
}
</style>
